<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <meta name="Keywords" content="华容县职业中专">
  <meta name="description" content="华容县职业中专的简介">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/zui.min.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/zui.min.js"></script>
  <link rel="stylesheet" href="css/swiper.4.4.2.min.css">
  <script src="js/swiper.4.4.2.min.js"></script>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
</head>
<body class="ph-info-page">
<!--[if lt IE 10]>
  <script>
    $("body").html('<div class="alert alert-danger" style="text-align:center;">您正在使用 <strong>过时的</strong> 浏览器. 为了增强用户体验,请升级你的浏览器!</div>')
  </script>
<![endif]-->
  <!-- 顶部 -->
  <div class="header">
    <div class="wraper2">
      <div class="head-cont">
        <h1>
          <img src="imgs/log.png" alt="华容县职业中专" height="92">
        </h1>
        <div class="head-sear">
          <a href="index.html" class="h-btns"><i class="icon icon-map-marker"></i> 回到首页</a>
          <a href="javascript:;" class="h-btns" id="login_btn"><i class="icon icon-user"></i> 登录</a>
          <div class="search-box">
            <input tyle="text" placeholder="请输入关键词" id="top_search_input">
            <a href="javascript:;" class="search-btn" id="top_search_btn"><i class="icon icon-search" style="font-size:18px"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>  
  <!-- 对话框 -->
  <div class="wraper2">
    <div class="modal fade" id="myLgModal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
            <h4 class="modal-title">用户登录</h4>
          </div>
          <div class="modal-body">
            <div class="input-control has-icon-left">
              <input id="inputAccountExample1" type="text" class="form-control" placeholder="用户名">
              <label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
            </div>
            <div class="input-control has-icon-left" style="margin-top: 20px;">
              <input id="inputPasswordExample1" type="password" class="form-control" placeholder="密码">
              <label for="inputPasswordExample1" class="input-control-icon-left"><i class="icon icon-key"></i></label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部导航 -->
    <div class="top-nav">
      <ul id="top_nav_lists">
        <!-- <li><a href="index.html" class="page-btns"><span>首 页</span></a></li>
        <li>
          <a href="info_page.html#p=xxkk" data-page="xxkk"><span>学校概况</span></a>
          <ul class="child-list">
            <li><a href="###">选项1</a></li>
            <li><a href="###">选项2</a></li>
            <li><a href="###">选项3</a></li>
          </ul>
        </li>
        <li>
          <a href="info_page.html#p=xydt" class="page-btns" data-page="xydt"><span>校园动态</span></a>
          <ul class="child-list">
            <li><a href="###">选项1</a></li>
            <li><a href="###">选项2</a></li>
            <li><a href="###">选项3</a></li>
          </ul>
        </li> -->
      </ul> 
    </div>

    <!-- ---------------- -->
    <!-- ------------------->
      <!-- 移动端导航 -->
      <button class="phone-tapNav-icon visible-xs" href="javascript:;"><i class="icon icon-bars"></i></button>
    <!-- ------------------->
    <!-- ------------------->
  </div>


  <!-- 宣传图 -->
  <div class="banner ban_info">
    <img src="imgs/profile_ban.jpg" class="dp-center">
  </div>  
  <!-- 内容 -->
  <div class="info_page">
    <div class="lef-nav" id="child_left_nav">
      <!-- <div class="ln-title">
        <h3>学校概况</h3>
        <p>ABOUT US</p>          
      </div>
      <div>
        <a class="btn-list" href="info_page.html#pg=profile">
          学校简介<i class="icon icon-circle-arrow-right"></i>
        </a>
        <a class="btn-list" href="javascript:;">
          校园风采<i class="icon icon-circle-arrow-right"></i>
        </a>
        <a class="btn-list" href="javascript:;">
          发展历程<i class="icon icon-circle-arrow-right"></i>
        </a>
        <a class="btn-list" href="javascript:;">
          联系地址<i class="icon icon-circle-arrow-right"></i>
        </a>        
      </div> -->
    </div>
    <div class="right-cont">
      <div class="rc_title" id="rc_title">
        <!-- <span class="cr-xq-title">校园动态</span>  
        首页 > 学校概况 > <span style="color:#dd0011;">学校简介</span> -->
      </div>
      <div class="temBox">

        <!-- --------
          简易的组件引入封装处理,只是展示效果, php中使用 require('temp.php') 处理
        ------ -->
        <div id="ifr" data-href="tem1"></div>
        <script>
          var paths = {
            tem1:"tem1_校园动态.html",
            tem2:"tem2_学校概况.html",
            tem3:"tem3_校园风采.html",
            tem4:"tem4_领导班子.html",
            tem5:"tem5_教师详情.html",
            tem6:"tem6_联系我们.html",
            tem7:"tem7_精品课堂.html"
          } 
          function require(p_child){
            var timer;
            var href = $("#ifr").data("href");                      
            var iframe = $("<iframe id='sssss'>").css("display","none");   
            var src = p_child ? paths[p_child] : paths[href];
            var srck = p_child ? p_child : href;
            $('body').append( iframe.attr("src",src));
            clearInterval(timer);
            timer = setInterval(function(){
              if(sessionStorage["bool"+srck]==="true"){     
                clearInterval(timer);
                var style = sessionStorage['style'+srck];
                var body = sessionStorage['body'+srck];
                var script = sessionStorage['script'+srck];
                if($("#style_fuzhu").length != 1) $("head").append( $("<style id='style_fuzhu'>").html(style));
                else $("#style_fuzhu").html(style);
                $("#ifr").html(body);
                new Function(script)();
                // 清空
                $("#sssss").remove();
                sessionStorage.removeItem("style"+srck);         
                sessionStorage.removeItem("body"+srck);  
                sessionStorage.removeItem("script"+srck);        
                sessionStorage.removeItem("bool"+srck);    
                $(".dp-center").each(function(){
                  var url = $(this).attr("src");
                  $(this).parent().attr("style","background:url("+url+") center no-repeat;background-size:cover;");
                  $(this).hide();
                })    
              }
            },15);
          }
        </script>
        <!-- ---------
          以上只是效果展示使用,实际开发时删除
        -------- -->

      </div>
    </div>
  </div>
  <!-- 底部 -->
  <div class="footer">
    <div class="wraper2">
      <div class="f-wrap">
        <div class="f-list" style="">
          <img src="imgs/bot_log.png" alt="" >
        </div>
        <div class="f-list hidd-xs" style="border:0;">
          <ul class="foLi">
            <li>学校概况</li>
            <li>校园动态</li>
            <li>教育园地</li>
            <li>招生就业</li>
            <li>教生风采</li>
            <li>通知公告</li>
            <li>党建工作</li>
          </ul>
          <a href="javascript:;" class="ewm" style="margin:0 20px 0 0;">
            <img src="imgs/ewm.jpg" alt="">微信公众号
          </a>
          <a href="javascript:;" class="ewm">
            <img src="imgs/ewm.jpg" alt="">微信公众号
          </a>
        </div>
      </div>
      <p class="adress hidden-xs">
        版权所有©华容县职业中专  |  地址：湖南省华容县城东北  |  邮编：13548901158@.139.COM
      </p>
      <div style="clear: both;"></div>
      <p class="adress2 visible-xs">
        版权所有©华容县职业中专 <br>
        地址：湖南省华容县城东北 <br>
        邮编：13548901158@.139.COM
      </p>
    </div>
  </div>
<script>
/*
头部导航渲染
传参: 数据源, hash
*/
function top_nav_lists(obj,hash){   
  var arr = decodeURI(hash).split("=")[1].split("/");
  var p = arr[0];
  var p_child = arr[1];
  var p_id = arr[2];
  // 渲染模板
  $("#top_nav_lists").html( top_nav_listHTML(obj) ).find(".n-home").removeClass("active"); 
  //根据url信息,使对应的按钮成选中状态
  $("#top_nav_lists").find('[href="#p='+p+'/'+p_child+'/'+p_id+'"]').addClass("active");
  $("#top_nav_lists").find('[data-page='+p+']').addClass("active");
}
/*
子页面左侧菜单渲染
传参: hash
*/
function child_left_navList(hash){
  var arr = decodeURI(hash).split("=")[1].split("/");
  var p = arr[0];
  var p_child = arr[1];
  var p_id = arr[2];
  var str = `
    <div class="ln-title">
      <h3>${obj[p].title}</h3>
      <p>${obj[p].en}</p>          
    </div>
    <div>${
      (function(){           
        var str = "";
        $.each(obj[p].children,function(i,v){  
          str += '<a class="btn-list" href="#p='+p+'/'+v.modal+'/'+i+'">'+
                    v.title+'<i class="icon icon-circle-arrow-right"></i>'+
                  '</a>';
        })
        return str
      })()
    }       
    </div>
  `;
  //渲染模板,根据url信息,使对应的按钮成选中状态
  $("#child_left_nav").html(str).find(".btn-list").eq(+p_id).addClass("active");  
}

//初始化
function init(){
  var hash = decodeURI(window.location.hash);
  if(!hash)window.location.href = "index.html";
  var arr = hash.split("=")[1].split("/");
  var p = arr[0];
  var p_child = arr[1];
  var p_id = arr[2];  
  child_left_navList(hash);
  top_nav_lists(obj,hash);
  $("#rc_title").html(`
    <span class="cr-xq-title">校园动态</span>  
    <span class="ph-hid">首页 > ${obj[p].title} > <span style="color:#dd0011;">${obj[p].children[+p_id].title}</span></span>
  `)

  //--------------------------后端开发中删除
  //引入组件
  require(p_child); 
  //--------------------------
}
init();

//监听hash变化
window.onhashchange = function(ev) {   
  init();      
};
</script>
</body>
</html>